<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JEUI - List</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link href="css/jeui.css" rel="stylesheet" type="text/css">
    <link href="css/gloab.css" rel="stylesheet" type="text/css">
    <script src="js/jeui.js"></script>
    <style>
        .list{overflow: hidden;padding: 10px;}
        .list .items{margin-bottom: 10px;overflow: hidden;}
        .list-thumb { width: 50px; height: 50px;}
        .list-thumb2 { width: 100px; height: 68px;}
        .list-thumb > span,.list-thumb2 > span{display: block;width: 100%;height: 100%;z-index: 1; background-repeat: no-repeat; -webkit-background-size: cover;}

    </style>
</head>
<body class="viewbody">
    <header class="viewhead je-bg-blue je-white je-text-center je-f16">JEUI - List</header>
    <content class="viewmain">
        <div class="je-f16 list">
            <h2 class="je-tl je-pt10 je-pb10 je-w100 je-fl je-f18">简单列表</h2>
            <div class="je-w100 items je-bg-white je-f14">
                <div class="je-flexbox je-text-center je-align-left je-orient-ver je-por je-cell-bottom je-p10 je-act">
                    <p class="je-c6">
                        <span>1.faycheng </span><span class="je-pl10"> 2月12日</span>
                    </p>
                    <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h4>
                </div>
                <div class="je-flexbox je-text-center je-align-left je-orient-ver je-por je-cell-bottom je-p10 je-act">
                    <p class="je-c6">
                        <span>2.faycheng </span><span class="je-pl10"> 2月12日</span>
                    </p>
                    <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h4>
                </div>
                <div class="je-flexbox je-text-center je-align-left je-orient-ver je-por je-cell-bottom je-p10 je-act">
                    <p class="je-c6">
                        <span>3.faycheng </span><span class="je-pl10"> 2月12日</span>
                    </p>
                    <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h4>
                </div>      
            </div>
            <h2 class="je-tl je-pt10 je-pb10 je-w100 je-fl je-f18">右边有内容的列表</h2>
            <div class="je-w100 items je-bg-white je-f14">
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <h4 class="je-vercent je-flex je-nowrap je-ell">这是标题，加ui-nowrap可以超出长度截断可以超出长度截断,这是标题，加ui-nowrap可以超出长度截断可以超出长度截断。</h4>
                    <div class="je-badge je-bg-red je-white je-f11">new</div>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <h4 class="je-vercent je-flex je-nowrap je-ell">这是标题，加ui-nowrap可以超出长度截断可以超出长度截断,这是标题，加ui-nowrap可以超出长度截断可以超出长度截断。</h4>
                    <div class="je-badge je-bg-red je-white je-f11">123</div>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <h4 class="je-vercent je-flex je-nowrap je-ell">这是标题，加ui-nowrap可以超出长度截断可以超出长度截断,这是标题，加ui-nowrap可以超出长度截断可以超出长度截断。</h4>
                    <label class="je-dib"><input class="je-switch je-switch-anim" type="checkbox"> </label>
                </div>             
            </div>
            <h2 class="je-tl je-pt10 je-pb10 je-w100 je-fl je-f18">文字列表</h2>
            <div class="je-w100 items je-bg-white je-f14">
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <h4 class="je-vercent je-flex je-pr8">您的性别您的性别您的性别您的性别您的性别您的性别您的性别您的性别</h4>
                    <div class="je-dib je-c9">男</div> <i class="je-arrow"></i>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <h4 class="je-vercent je-flex">您的生日</h4>
                    <div class="je-dib je-c9">1988年8月8日</div> <i class="je-arrow"></i>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <div class="list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <h4 class="je-vercent je-flex je-pl8">性别</h4>
                    <div class="je-dib je-c9">男</div> <i class="je-arrow"></i>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <div class="list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <h4 class="je-vercent je-flex je-pl8">性别</h4>
                    <div class="je-dot je-bg-red"></div> <i class="je-arrow"></i>
                </div>         
            </div>
            <h2 class="je-tl je-pt10 je-pb10 je-w100 je-fl je-f18">图文列表带头像</h2>
            <div class="je-w100 items je-bg-white je-f14">
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <div class="list-thumb rdu jeovh">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="je-text-center je-align-left je-orient-ver je-flex je-pl8 je-pr8">
                        <h4 class="je-nowrap je-ell">这是标题，加je-nowrap je-ell可以超出长度截断可以超出长度截断</h4>
                        <p class="je-nowrap je-ell g9">这是内容，加je-nowrap je-ell可以超出长度截断可以超出长度截断</p>
                    </div>
                    <i class="arrow"></i>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <div class="list-thumb je-rdu je-ovh">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="je-text-center je-align-left je-orient-ver je-flex je-pl8 je-pr8">
                        <h4 class="je-nowrap je-ell">这是标题，加je-nowrap je-ell可以超出长度截断可以超出长度截断</h4>
                        <p class="je-nowrap je-ell g9">这是内容，加je-nowrap je-ell可以超出长度截断可以超出长度截断</p>
                    </div>
                    <i class="je-arrow"></i>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <div class="list-thumb2">
                        <span style="background-image:url(http://placeholder.qiniudn.com/200x136)"></span>
                    </div>
                    <div class="je-text-center je-align-left je-orient-ver je-flex je-pl8 je-pr8">
                        <h4 class="je-nowrap je-ell">这是标题，加je-nowrap je-ell可以超出长度截断可以超出长度截断</h4>
                        <p class="je-nowrap je-ell je-c9">这是内容，加je-nowrap je-ell可以超出长度截断可以超出长度截断</p>
                    </div>
                    <i class="je-arrow"></i>
                </div>
                <div class="je-flexbox je-align-center je-por je-cell-bottom je-p10 je-act">
                    <div class="list-thumb2">
                        <span style="background-image:url(http://placeholder.qiniudn.com/200x136)"></span>
                    </div>
                    <h4 class="je-vercent je-flex je-pl8">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h4>
                    <i class="je-arrow"></i>
                </div>         
            </div>
        </div>
    </content>
   
</body>
</html>